<template>
  <div class="app-container">
    <search @seach="seach"></search>
    <div class="table-box">
      <a href="javascript:;" class="exportdocument"  @click="add"><i class="el-icon-circle-plus"></i>添加</a>
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle"  ></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
    <UpdateUser :show.sync="show" v-on:close="close" :row="row" v-on:submit="submit" :type="type"/>
    <set-user :showUserModal.sync="showUserModal" v-on:close="close"  v-on:submit="submit" :type="type"></set-user>
    <permissions :showpermiModal="showpermiModal" :showpermiModal.sync="showpermiModal" v-on:close="closepermiss"> </permissions>
  </div>
</template>

<script>
  import { querySysUser } from '@/api/list'
  import search from  './search'
  import Pagations from '@/components/pagations'
  import UpdateUser from './update'
  import pagationdata from '@/mixins/pagations'
  import { updateUser, addSysUser } from '@/api/request'
  import Tables from  '@/components/table'
  import Option from '@/components/table/option'
  import SetUser from './setusers'
  import Permissions from '../channel/permissions'
  export default {
    mixins: [pagationdata],
    name:'OverSpeed',
    data() {
      return {
        show: false,
        showUserModal:false,
        showpermiModal:false,
        row: {},
        type: '1',
        tableTitle:[{
          title:'角色号',
          prop:'account',
        }, {
          title:'角色名称',
          prop:'telephone',
        },{
          title:'创建时间',
          prop:'name',
        },{
          prop: "",
          title: "操作",
          render: (h, param) => {
            const optionData = {
              title: "操作",
              type:'',
              items: [
                { label: "修改", func: { func: "openupdate", uuid: param.row },id:1},
                { label: "权限设置", func: { func: "openpermiss", uuid: param.row },id:1},
                { label: "用户配置", func: { func: "openSetUser", uuid: param.row },id:1}
              ]
            };

            return h(Option, {
              props: { optionData: optionData },
              on: { openupdate: this.openupdate,openpermiss: this.openpermiss,openSetUser: this.openSetUser}
            });
          }
        }]
      }
    },
    components:{
      search,
      Pagations,
      UpdateUser,
      Tables,
      SetUser,
      Permissions
    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      openupdate(row) {
        this.show = true
        this.row = row
        this.type = "2"
      },
      openpermiss(){
        this.showpermiModal=true
      },
      add(){
        this.show = true
        this.row = {}
        this.type = "1"
      },
      seach(data){
        this.formline=data
        this.fetchData(data)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        querySysUser(data).then(response => {
          if(response && response.body){
            this.list = response.body.sysUserList
            this.totalCount = response.body.count
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      },
      close(formName) {
        this.show = false
        formName.resetFields()
      },
      submit({ formName, formInline }) {
        let that = this
        formName.validate((valid) => {
          if (valid) {
            this.show = false
            this.formline={}
            if(this.type==='1'){
              addSysUser({...formInline}).then(response => {
                that.fetchData(this.listQuery)
              })
            }else {
              updateUser({...formInline,status:0}).then(response => {
                that.fetchData(this.listQuery)
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      closepermiss(){
        this.showpermiModal=false
      },
      openSetUser(){
        this.showUserModal=true
      }
    }
  }
</script>
